<template>
    <el-form ref="ruleFormRef" :rules="rules" :model="form_active1" label-width="120px">
        <el-form-item label="商品分类：" prop="productCategoryName">
            <el-cascader clearable v-model="form_active1.productCategoryName" :options="useAddToPro.options" />
        </el-form-item>
        <el-form-item label="商品名称：" prop="name">
            <el-input v-model="form_active1.name" />
        </el-form-item>
        <el-form-item label="副标题：" prop="subTitle">
            <el-input v-model="form_active1.subTitle" />
        </el-form-item>
        <el-form-item label="商品品牌：" prop="brandName">
            <el-cascader clearable v-model="form_active1.brandName" :options="useAddToPro.BrandListOption" />
        </el-form-item>
        <el-form-item label="商品介绍：">
            <el-input v-model="form_active1.description" type="textarea" />
        </el-form-item>
        <el-form-item label="商品货号：">
            <el-input v-model="form_active1.productSn" />
        </el-form-item>
        <el-form-item label="商品售价：">
            <el-input v-model="form_active1.price" />
        </el-form-item>
        <el-form-item label="市场价：">
            <el-input v-model="form_active1.originalPrice" />
        </el-form-item>
        <el-form-item label="商品库存：">
            <el-input v-model="form_active1.stock" />
        </el-form-item>
        <el-form-item label="计量单位：">
            <el-input v-model="form_active1.unit" />
        </el-form-item>
        <el-form-item label="商品重量：">
            <el-input v-model="form_active1.weight" style="width: 190px; padding-right: 20px;" />
            克
        </el-form-item>
        <el-form-item label="排序：">
            <el-input v-model="form_active1.sort" />
        </el-form-item>
        <el-form-item>
            <el-button style="margin-top: 12px" @click="next(ruleFormRef)">下一步，填写商品促销</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage, FormInstance, FormRules } from 'element-plus';
import { useToPro } from "@/store/AddToPro"

const useAddToPro = useToPro()

const emits = defineEmits<{
    (e: "next"): void
}>()

const form_active1 = ref({
    productCategoryName: "", // 商品分类 1
    name: "", // 商品名称 11
    subTitle: "", // 副标题 11
    brandName: "", // 商品品牌 1 1
    description: "", //商品介绍 11
    productSn: "", // 商品货号 11
    price: 0, // 商品售价 11
    originalPrice: 0, // 市场价 11
    stock: 0,// 商品库存 11
    unit: "", // 数量单位 11
    weight: 0, // 商品克重 11
    sort: 0 // 排序 11
})

const validateProductName = (_rule: any, value: any, callback: any) => {
    let reg = /^[\s\S]{1,140}$/;
    if (value === '') {
        callback(new Error('请输入关键字'))
    }
    else if (!reg.test(value)) {
        callback(new Error('1到140字符之间'))
    }
    else {
        callback()
    }
}

const rules = reactive<FormRules>({
    productCategoryName: [ // 商品分类
        { required: true, message: '请选择商品分类', trigger: 'blur' },
    ],
    name: [
        { required: true, validator: validateProductName, trigger: 'blur' },
    ],
    subTitle: [
        { required: true, message: '请选择商品分类', trigger: 'blur' },
    ],
    brandName: [
        { required: true, message: '请选择商品分类', trigger: 'blur' },
    ]
})

const ruleFormRef = ref<FormInstance>()

const next = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, _fields) => {
        if (valid) {
            emits("next")
            useAddToPro.PushData(form_active1.value)
            console.log(form_active1);
        } else {
            ElMessage.success("输入关键字")
        }
    })
}

</script>

<style scoped></style>